<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('资料爬取列表')"/>
    <th:block th:include="include :: layout-latest-css"/>
    <th:block th:include="include :: ztree-css"/>
</head>
<body class="gray-bg">
<div class="ui-layout-west">
    <div class="box box-main">
        <div class="box-header">
            <div class="box-title">
                <i class="fa icon-grid"></i> 目录
            </div>
            <div class="box-tools pull-right">

            </div>
        </div>
        <div class="ui-layout-content">
            <div id="tree" class="ztree"></div>
        </div>
    </div>
</div>
<div class="ui-layout-center">
    <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="formId">
                    <input type="hidden" id="pid" name="pid" value="1">
                    <div class="select-list">
                        <ul>
                            <li>
                                <p>标题：</p>
                                <input type="text" name="title"/>
                            </li>
                            <li>
                                <p>入库状态：</p>
                                <select name="status" th:with="type=${@dict.getType('material_spider_status')}">
                                    <option value="">所有</option>
                                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:selected="${dict.dictValue=='0'}"></option>
                                </select>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>

            <div class="btn-group-sm" id="toolbar" role="group">
                <a class="btn btn-primary multiple disabled" onclick="importToMaterial()" shiro:hasPermission="dict:spider:edit">
                    <i class="fa fa-edit"></i> 导入&创建学习资料
                </a>
                <a class="btn btn-primary multiple disabled" onclick="importToOldMaterial()" shiro:hasPermission="dict:spider:edit">
                    <i class="fa fa-edit"></i> 导入&现有学习资料
                </a>
            </div>
            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table" data-reorderable-rows="true" data-use-row-attr-func="true"></table>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: layout-latest-js"/>
<th:block th:include="include :: ztree-js"/>
<th:block th:include="include :: bootstrap-table-reorder-js"/>
<script th:inline="javascript">

        var addFlag = [[${@permission.hasPermi('dict:spider:add')}]];
        var editFlag = [[${@permission.hasPermi('dict:spider:edit')}]];
        var removeFlag = [[${@permission.hasPermi('dict:spider:remove')}]];
        var resTypeDatas = [[${@dict.getType('material_res_type')}]];
        var prefix = ctx + "dict/spider";

		$(function() {
		    var panehHidden = false;
		    if ($(this).width() < 769) {
		        panehHidden = true;
		    }
		    $('body').layout({ initClosed: panehHidden, west__size: 285 });
		    querySpiderList();
		    querySpiderTree();
		});

        function querySpiderList(){
            var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove",
                exportUrl: prefix + "/export",
                pageSize: 150,
                pageList: [10, 25, 50, 100],
                modalName: "资料爬取",
                onReorderRow: function (data) {
		        	 //当拖拽结束后，data为整个表格的数据
		            //console.log('拖拽结束' + JSON.stringify(data))
		            let pid = 0
		            let samePid = true
		            let ids = []
		            data.forEach(item => {
                        if(pid == 0){
                          pid = item.pid
                        }else{
                          if(pid != item.pid){
                            samePid = false
                          }
                        }
                        ids.push(item.id)
		            })
		            if(samePid){

                       var config = {
                            url: prefix + '/updateSeq',
                            type: 'post',
                            dataType: 'json',
                            data: {'ids': ids.join(), 'pid': pid},
                            success: function(result) {
                                $.table.refresh();
                            }
        	           };
        	           $.ajax(config)

		            }else{
                      $.modal.msgWarning("当前列表内容不是在同一目录下,不能重新排序");
		              $.table.refresh();
		            }
		            return false;
		        },
                columns: [{
                    checkbox: true
                },
                {
                    field : 'id',
                    title : 'id',
                    visible: false
                },
                {
                    field : 'title',
                    title : '标题',
                    width: '65%'
                },
                {
                    field : 'url',
                    title : '源地址',
                    formatter: function (value, row, index) {
		        		return `<a href='${value}' target='_blank'>打开</a>`
		        	}
                },
                {
                    field : 'resType',
                    title : '资源类型',
                    formatter: function (value, row, index) {
		        		return $.table.selectDictLabel(resTypeDatas, value);
		        	}
                },
                {
                    field : 'seq',
                    title : '排序',
                    width: '10%'
                },
                {
                    field: 'status',
                    title: '入库状态',
                    formatter: function(value, row, index) {
                		if(value==1){
                		   return '<span class="glyphicon glyphicon-ok"></span>'
                		}else{
                		   return ''
                		}
                	}
                },
                {
                    title: '操作',
                    align: 'center',
                    width: '10%',
                    formatter: function(value, row, index) {
                        var actions = [];
                        if(row.leaf == 1){
                           actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        }
                        if(row.resType == 3){
                           actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="' + row.downloadUrl + '" target="_blank"><i class="fa fa-edit"></i>下载</a> ');
                        }
                        //actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
                        return actions.join('');
                    }
                }]
            };

            $.table.init(options);
        }

        function querySpiderTree(){

			var url = ctx + "dict/spider/treeData";
			var options = {
		        url: url,
		        expandLevel: 2,
		        onClick : zOnClick
		    };
			$.tree.init(options);

			function zOnClick(event, treeId, treeNode) {
				$("#pid").val(treeNode.id);
				$("#parentId").val(treeNode.pId);
				$.table.search();
			}
        }

        function importToMaterial() {
            var rows = $.table.selectColumns("id");
			if (rows.length == 0) {
       			$.modal.alertWarning("请至少选择一条记录");
       			return;
       		}
       		var importToMaterialUrl = prefix + "/material/" + rows.join();
       		$.modal.open("导入&创建学习资料", importToMaterialUrl);
		}

		function importToOldMaterial() {
            var rows = $.table.selectColumns("id");
			if (rows.length == 0) {
       			$.modal.alertWarning("请至少选择一条记录");
       			return;
       		}
       		var importToOldMaterialUrl = prefix + "/materialOld/" + rows.join();
       		$.modal.open("导入&现有学习资料", importToOldMaterialUrl);
		}

		function edit(id){
            var title = "学习资料内容整理"
            var url = $.table._option.updateUrl.replace("{id}", id);
            var width = 800;
            var height = ($(window).height() - 50);
            var index = layer.open({
                type: 2,
                area: [width + 'px', height + 'px'],
                fix: false,
                //不固定
                maxmin: true,
                shade: 0.3,
                title: title,
                content: url,
                btn: ['单篇入库', '确定', '关闭'],
                // 弹层外区域关闭
                shadeClose: true,
                yes: function(index, layero) {
                    var iframeWin = layero.find('iframe')[0];
                    iframeWin.contentWindow.importHandler(index, layero);
                },
                btn2: function(index, layero){
                    var iframeWin = layero.find('iframe')[0];
                    iframeWin.contentWindow.submitHandler(index, layero);
                },
                cancel: function(index) {
                    return true;
                }
            });
            layer.full(index);
		}

    </script>
</body>
</html>